<template>
  <div class="parabola" ref="paraRef" @touchstart="launch">

  </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
interface Pos{
  x: number;
  y: number;
}
class Box {
  public dom = document.createElement('div');
  public current: Pos={ x: 0, y: 0 };
  public vel: Pos={ x: 0, y: 0 };
  public acl: Pos= { x: 0, y: 0 };
  public aclTo: Pos = { x: 0, y: 0 };
  // public aclFlag=1;

  constructor(x: number, y: number) {
    this.dom.classList.add('box');
    this.current.x = x;
    this.current.y = y;
    const angleVel = Math.random() * 2 * Math.PI;
    const vel = Math.random();
    this.vel.x = vel * Math.cos(angleVel);
    this.vel.y = vel * Math.sin(angleVel);
    this.updateAcl();
  }
  public updateAcl() {
    const angleAcl = Math.random() * 2 * Math.PI;
    const aclNum = Math.random() * 2;
    this.aclTo.x = aclNum * Math.cos(angleAcl);
    this.aclTo.y = aclNum * Math.sin(angleAcl);
    this.acl.x += (this.aclTo.x - this.acl.x) / 20;
    this.acl.y += (this.aclTo.y - this.acl.y) / 20;
  }
  public updatePos() {
    this.vel.x += this.acl.x;
    this.current.x += this.vel.x;
    this.vel.y += this.acl.y;
    this.current.y += this.vel.y;
  }
  public render() {
    this.updateAcl();
    this.updatePos();

    this.dom.style.transform = `translate(${this.current.x}px, ${this.current.y}px) rotateZ(${180 * Math.atan2(this.vel.y, this.vel.x) / Math.PI}deg)`;
  }
  public remove() {
    this.dom.parentNode?.removeChild(this.dom);
  }
}
@Options({  components: {

},
})
export default class Parabola extends Vue {
  private timer: null | number= null;
  private rect: null|DOMRect = null;
  private boxList: Box[]=[];
  // public acl: Pos = { x: 0, y: 0 };

  public launch(e: TouchEvent) {
    const boxDom =  new Box(e.touches[0].pageX, e.touches[0].pageY);
    (this.$refs.paraRef as HTMLDivElement).append(boxDom.dom);
    this.boxList.push(boxDom);
    if (!this.timer) {
      this.play();
    }
  }
  public play() {
    for (let index = 0; index < this.boxList.length; index++) {
      const item = this.boxList[index];
      item.render();

      // eslint-disable-next-line max-len
      if (item.current.x < 0 || item.current.x >  this.rect!.width || item.current.y >  this.rect!.height || item.current.y < 0) {
        item.remove();
        this.boxList.splice(index, 1);
        index -= 1;
      }
    }
    if (this.boxList.length > 0) {
      this.timer =  window.requestAnimationFrame(this.play);
    } else {
      this.timer = null;
    }
  }
  public mounted() {
    this.rect = (this.$el as HTMLDivElement).getBoundingClientRect();
  }
  public unmounted() { // 钩子函数销毁
    window.cancelAnimationFrame(this.timer!);
    this.timer = null;
  }
};
</script>

<style lang="postcss">
.box{
  position: absolute;
  width: 40px;
  height: 40px;
  /* border-radius: 50%; */
  background-color: white;
}
</style>

function parameters(parameters: any) {
  throw new Error('Function not implemented.');
}

function parameters(parameters: any) {
  throw new Error('Function not implemented.');
}
